<template>
  <view
    class="my-input flex-row flex-1"
    :class="[size, border ? 'border' : '', disabled ? 'disabled' : '']"
  >
    <view class="flex-row flex-1 items-center">
      <textarea
        class="input textarea"
        v-if="type === 'textarea'"
        :rows="rows"
        :autoHeight="autoHeight"
        :style="{ height: height, minHeight: minHeight }"
        :value="value"
        :maxlength="maxlength"
        :focus="focus"
        :disabled="disabled"
        :placeholder="placeholder"
        @input="$emit('input', $event.detail.value)"
        @blur="blur"
        placeholder-style="color:#8a929f;"
      ></textarea>
      <input
        v-else
        class="input flex-1"
        :type="type"
        :confirmType="confirmType"
        :value="value"
        :maxlength="maxlength"
        :focus="focus"
        :align="align"
        :disabled="disabled"
        :placeholder="placeholder"
        @input="$emit('input', $event.detail.value)"
        @confirm="$emit('confirm', $event.detail.value)"
        @blur="blur"
        placeholder-style="color:#8a929f;"
      />
      <text v-if="unit" class="unit">{{ unit }}</text>
    </view>
    <view v-if="clearable && value" class="clear_btn" @click.stop="handleClear">
      <text class="cuIcon-roundclosefill" style="color: #c0c4cc"></text>
    </view>
    <slot></slot>
  </view>
</template>

<script lang="ts" setup name="myInput">
const props = defineProps({
  value: [String, Number],
  placeholder: {
    type: String,
    default: '请输入',
  },
  maxlength: {
    type: [String, Number],
    default: 800,
  },
  unit: String,
  border: Boolean,
  disabled: Boolean,
  clearable: Boolean,
  size: {
    // default big large small
    type: String,
    default: 'default',
  },
  type: {
    type: String,
    default: 'text',
  },
  confirmType: {
    type: String,
    default: 'done',
  },
  height: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: 'left',
  },
  focus: {
    type: Boolean,
    default: false,
  },
  rows: {
    type: Number,
    default: 3,
  },
  autoHeight: {
    type: Boolean,
    default: false,
  },
  minHeight: {
    type: String,
    default: 'auto',
  },
});
const emits = defineEmits(['change', 'update:value', 'blur', 'input', 'clear', 'confirm']);
watch(
  () => props.value,
  (val) => {
    emits('update:value', val);
    emits('change', val);
  },
);
const blur = () => {
  uni.hideKeyboard();
  emits('blur', props.value);
};
const handleClear = () => {
  emits('update:value', '');
  emits('input', '');
  emits('clear', '');
};
</script>

<style scoped lang="scss">
.flex-row {
  display: flex;
}
.items-center {
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.my-input {
  align-items: center;
  justify-content: space-between;
  border-radius: 12rpx;
  background-color: #fff;
  &.disabled {
    background-color: #f8f8f8;
    .input {
      color: #999;
    }
  }
  .input {
    font-size: 26rpx !important;
    padding: 10rpx 20rpx;
    &.textarea {
      font-size: 26rpx !important;
      width: 100%;
    }
  }
  .unit {
    margin-left: 12rpx;
    font-size: 26rpx;
    color: #999;
  }
  &.border {
    border: 1rpx solid #f3f3f3;
    padding: 8rpx;
  }
  &.big {
    border-radius: 12rpx;
    font-size: 32rpx !important;
    .input {
      font-size: 32rpx !important;
    }
    &.border {
      padding: 12rpx;
    }
  }
  &.large {
    border-radius: 8rpx;
    font-size: 28rpx !important;
    .input {
      font-size: 28rpx !important;
    }
    &.border {
      padding: 12rpx;
    }
  }
  &.small {
    border-radius: 6rpx;
    font-size: 24rpx !important;
    .input {
      font-size: 24rpx !important;
    }
    &.border {
      padding: 6rpx;
    }
  }
}
</style>
